<template>
  <div class="page-container">
    <cs-table :table-data="tableData"
              :table-label="tableLabel"
              @handleButton="handleButton"
              :loading="loading"
              :isSelection="isSelection"
              :table-option="tableOption">
      <template  slot="audits" slot-scope="scope">
        {{scope.row.audits ? scope.row.audits  : '暂无审核记录' }}
      </template>
    </cs-table>
<!--    <el-pagination-->
<!--      @size-change="sizeChangeHandle"-->
<!--      @current-change="currentChangeHandle"-->
<!--      :current-page="pageRequest.pageNo"-->
<!--      :page-sizes="[10, 20, 50, 100]"-->
<!--      :page-size="pageRequest.pageSize"-->
<!--      :total="totalPage"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      style="text-align: right; margin-top: 10px"-->
<!--    >-->
<!--    </el-pagination>-->
    <add-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="queryActiveList"></add-update>
<!--    修改日报-->
    <edit-daily v-if="editDailyVisible" ref="editDaily" @refreshDataList="queryActiveList"></edit-daily>
    <send-daily v-if="sendDailyVisible" ref="sendDaily" @refreshDataList="queryActiveList"></send-daily>
  </div>
</template>
<script>
  import KtButton from "@/views/Core/KtButton"
  import {queryActiveList} from "@/api/dailyweekly/workflow"
  import AddUpdate from './add-update'
  import editDaily from './edit-daily'
  import sendDaily from './send-update'
  export default {
    data() {
      return {
        isSelection: false,
        tableData: [],
        loading: true,
        addOrUpdateVisible: false,
        editDailyVisible: false,
        sendDailyVisible: false,
        tableLabel: [
          { label: '任务ID', param: 'id', align: 'center'},
          { label: '任务的办理人', param: 'name', align: 'center'},
          { label: '任务名称', param: 'name', align: 'assignee', isShow: true},
          { label: '任务的创建时间', param: 'createTime', align: 'center', isShow: true},
          { label: '流程实例ID', param: 'processInstanceId', align: 'center', isShow: true},
          { label: '备注', param: 'audits', align: 'center', isShow: true, slot: true}
        ],
        tableOption: {
          label: '操作',
          width: '300',
          options: [
            { label: '编辑日报', type: '', icon: 'el-icon-edit', methods: 'edit', auth: 'rb:dailyRecord:saveOrUpdate' },
            { label: '审核', type: 'warning', icon: 'el-icon-s-claim', methods: 'claim', auth: 'act:activit:auth' },
            { label: '发送', type: 'warning', icon: 'el-icon-s-claim', methods: 'send', auth: 'act:activit:arge' }
          ]
        },
        pageRequest: {
          pageNo: 1,
          pageSize: 10
        },
        totalPage: 0
      }
    },
    components: {
      KtButton,
      AddUpdate,
      sendDaily,
      editDaily,
      'CsTable': () => import('@/components/cs-table')
    },
    created () {
      this.queryActiveList()
    },
    methods: {
      async queryActiveList () {
        this.loading = true
        const data = await queryActiveList()
        if (data) {
          if (data.code === 200) {
            this.tableData = data.data
            this.loading = false
          } else {
            this.loading = false
            this.tableData = []
          }
        }
      },
      handleButton (methods) {
        if (methods.methods === 'claim') {
          this.addOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.addOrUpdate.init(methods.row)
          })
        } else if (methods.methods === 'edit') {
          this.editDailyVisible = true
          this.$nextTick(() => {
            this.$refs.editDaily.initConfig(methods.row.dailyId)
          })
        } else if (methods.methods === 'send') {
          this.sendDailyVisible = true
          this.$nextTick(() => {
            this.$refs.sendDaily.init(methods.row)
          })
        }
      },
      sizeChangeHandle (val) {
        this.pageRequest.pageSize = val
        this.pageRequest.pageNo = 1
        this.queryActiveList()
      },
      currentChangeHandle (val) {
        this.pageRequest.pageNo = val
        this.queryActiveList()
      }
    }
  }
</script>
